<template>
  <div id="tab">
    <div class="tab-bar clearfix">
      <a href="javascript:;" @click="tab(index)" v-for="(item,index) in items" :class="{active : index===curId}"
      >{{item.item}}</a>
    </div>
    <div class="tab-con">
     <div v-show="index===curId" v-for="(content, index) in contents" >{{content.content}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        curId: 0,
        items: [
          {item: '公司新闻'},
          {item: ' 行业资讯'},
        ],
        contents: [
          {content: 'HTML'},
          {content: 'CSS'}
        ]
      }
    },

    methods: {
      tab (index) {
        this.curId = index;
      }
    }
  }
</script>

<style scoped>
  #tab {
    width: 100%;
    background: #fff;
    margin:10px auto 0;
  }
  .tab-bar {
    
  }
  .tab-bar a {
    float: left;
    width: 200px;
    padding: 20px 0;
    text-align: center;
    color: #545454;
  }
  .tab-bar .active {
    background-color: #0099ff;
    color: #fff;
  }
  .tab-con div {
    text-align: left;
    height: 100px;
  }

</style>

